<template>
	<view :class="currentTheme">
		<a-nabbar name="预约发车" />
		<view class="u-padding-32">
			<view class="u-margin-bottom-20">
				<item-box padding="0">
					<view class="u-padding-left-40 u-padding-right-40">
						<label-box label="选择发车剧本" labelWidth="190" paddingTb="20">
							<select-item v-model="form.product" :list="larpList" @getIds="getlarpIds"
								v-if="larpList.length"></select-item>
							<view class="diy-view" v-else>
								请先上传剧本再发车
							</view>
						</label-box>
						<label-box label="可否反串" labelWidth="190" paddingTb="20">
							<view class="u-flex" style="height: 65rpx;">
								<view v-for="(item, index) in reverseList" :key="index"
									:class="{'u-margin-left-30':index>0}">
									<v-radio :name="item.value" v-model="form.isCrossTalk">
										<view class=" u-font-26 text-order-time">{{item.label}}</view>
									</v-radio>
								</view>
							</view>
						</label-box>
					</view>
				</item-box>
			</view>
			<view class="u-margin-bottom-20">
				<item-box padding="0">
					<view class="u-padding-left-40 u-padding-right-40">
						<label-box label="选择车次" labelWidth="190" paddingTb="20">
							<select-item v-model="form.larpSessionObj" :list="larpSessions" @getSelect="getSelect">
							</select-item>
						</label-box>
						<template v-if="form.larpSessionObj">
							<label-box label="开始上车时间" labelWidth="190" paddingTb="20">
								<view class="u-flex-1 diy-view">
									{{form.enrollTime}}
								</view>
							</label-box>
							<label-box label="发车时间" labelWidth="190" paddingTb="20">
								<view class="u-flex-1 diy-view">
									{{form.estimateTime}}
								</view>
							</label-box>

						</template>
					</view>
				</item-box>
			</view>
			<view class="u-margin-bottom-20" v-if="isModelShow">
				<item-box padding="0">
					<view v-if="grantAuthCities.length" class="u-border-bottom u-padding-bottom-30">
						<view class="u-font-22 text-order-time u-text-center u-padding-top-38">点击下列标签修改</view>
						<u-row>
							<u-col span="4" v-for="(c,i) in grantAuthCities" :key="i">
								<view class="u-margin-top-32 u-flex u-row-center">
									<cityBtn :item="c" isEdit @select="select"></cityBtn>
								</view>
							</u-col>
						</u-row>
						<view class="u-margin-top-32 u-flex u-row-center" v-if="form.grantAuthCities.length>6">
							<item-btn  @click="showCity = !showCity" width="194" height="64" type="plain" borderColor="white">
								<view class="u-flex">
									<text
										class="text-color-txtTheme u-font-26 u-margin-right-10">{{showCity?'收起':'显示全部'}}</text>
									<u-icon name="arrow-down" :color="currentThemeObj.primary" size="20"></u-icon>
								</view>
							</item-btn>
						</view>
					</view>
					<view class="u-flex">
						<view
							class="u-padding-top-30 u-padding-bottom-30 u-padding-left-20 u-padding-right-10 u-flex-1">
							<item-btn width="100%" height="88" @click="showPop">上车城市设置</item-btn>
							<view class="u-font-22  u-margin-top-40 text-color-txtTheme u-text-center">
								限制某城市上车店家数量
							</view>
						</view>
					</view>
					<!-- <view class="u-padding-left-40 u-padding-right-40 u-padding-top-20">
						<label-box label="授权城市设置" labelWidth="190">
							<view class="u-flex">
								<view class="u-flex-1">
									<select-item v-model="grantAuthCity.address"  mode="popSelectCity" @getSelect="getSelectCity"></select-item>
								</view>
								<view class="u-margin-left-10 u-margin-right-10" style="width: 74rpx;">
									<u-input type="number" v-model="grantAuthCity.count" height="64" :clearable="false" border
										:borderColor="currentThemeObj.inputBorderColor" placeholder=" "></u-input>
								</view>
								<view>
									<item-btn @click="saveCity" width="94" height="63">确定</item-btn>
								</view>
							</view>
							<view class="u-font-22 text-order-time u-margin-top-14">设置某城市上车店家数量</view>
						</label-box>
					</view>
					<view class="u-padding-20">
						<u-row>
							<u-col span="4" v-for="(c,i) in form.grantAuthCities" :key="i">
								<view class="u-margin-bottom-28 u-flex u-row-center">
									<cityBtn :item="c" @remove="removeIds" @select="select"></cityBtn>
								</view>
							</u-col>
						</u-row>
					</view> -->
				</item-box>
			</view>
		</view>
		<fixed-team btnText="提交" @btnClick="save" :loading="loading"></fixed-team>
		<edit-modal :show="addFlag" :comfirm="true" @close="close" :isCityEdit="isCityEdit" v-model="activeForm" @remove="removeIds" @confirm="saveCity" isCarCity/>
	</view>
</template>

<script>
	import selectCityMixins from '@/mixins/selectMixins.js'
	import {
		getList,
		add,
		getDetail
	} from '@/api/crud.js'
	import dayjs from 'dayjs'
	import {
		mapGetters
	} from 'vuex'
	import cityBtn from './button.vue'
	import vRadio from '@/components/itemRadio/itemRadio.vue'
	import editModal from '@/pages/addLarp/addCityPop/index.vue'
	export default {
		mixins: [selectCityMixins],
		components: {
			cityBtn,
			vRadio,
			editModal
		},
		data() {
			return {
				form: {
					isExhibitNearby: '1',
					isCrossTalk: '1',
					productId: '',
					enrollTime: "",
					estimateTime: '',
					exhibitProductId: '',
					status: 0,
					larpSessionObj: '',
					grantAuthCities: []
				},
				reverseList: [{
					label: '可以',
					value: '1'
				}, {
					label: '不可以',
					value: '0'
				}],
				canList: [{
					label: '是',
					value: '1'
				}, {
					label: '否',
					value: '0'
				}],
				larpList: [],
				apiType: 'driveCar',
				apiModule: 'shopApi',
				loading: false,
				larpSessions: [],
				showCity: false,
				addFlag:false,
				isCityEdit:false,
				isCanClick:true,
				activeForm: {
					count: '',
					address: "",
					id: ''
				},
			};
		},
		onLoad() {
			getDetail('', 'exhibit', 'shopApi', 'getTimeInterval').then(res => {
				this.larpSessions = res.map(val => {
					const enrollTime = dayjs(val.enrollTime).format('MM-DD HH:mm')
					const estimateTime = dayjs(val.estimateTime).format('MM-DD HH:mm')
					return {
						label: `${val.title}(${enrollTime}-${estimateTime})`,
						extra: val
					};
				});
			})
			this.getLarp()
		},
		computed: {
			uid() {
				return this.loginForm.uid
			},
			activeLarp() {
				return this.larpList.find(val => val.productId == this.form.productId) || {}
			},
			...mapGetters(['loginForm']),
			isExhibit() {
				return this.loginForm.isExhibit
			},
			isModelShow() {
				const flag = ['独家', '城限'].includes(this.activeLarp.issueModeName);
				flag && this.grantAuthCitiesList()
				return flag;
			},
			grantAuthCities() {
				return !this.showCity ? this.form.grantAuthCities.slice(0, 6) : this.form.grantAuthCities
			},
		},
		methods: {
			getLarp() {
				getList({
					creatorId: this.uid
				}, 'exhibitProduct', this.apiModule, 'list').then(res => {
					this.larpList = res.map(val => ({
						value: val.id,
						label: val.name,
						people: val.people,
						productId: val.productId,
						issueModeName: val.issueModeName
					}));
					console.log("this.larpList: " + JSON.stringify(this.larpList));
				})
			},
			getlarpIds(id) {
				let arr = this.larpList
				let newArr = arr.filter(item => item.value == id)
				this.form.productId = newArr[0].productId //剧本id
				this.form.exhibitProductId = id; //参展剧本id
				this.form.grantAuthCities = []
			},
			//获取历史设置的授权城市
			grantAuthCitiesList() {
				getList({
					productId: this.form.productId
				}, 'driveCar', this.apiModule, 'findGrantAuthCitysByProductId').then(res => {
					this.form.grantAuthCities = res
				})
			},
			save() {
				if(this.isCanClick){
					const {
						productId,
						enrollTime,
						estimateTime,
						address,
						lockPeople,
						isCrossTalk
					} = this.form;
					if (!productId) {
						this.$u.toast('请选择发车剧本')
						return false;
					}
					if (!enrollTime) {
						this.$u.toast('请选择开始上车时间')
						return false;
					}
					if (!estimateTime) {
						this.$u.toast('请选择发车时间')
						return false;
					}
					if (new Date(enrollTime).getTime() > new Date(estimateTime).getTime()) {
						this.$u.toast('发车时间不正确')
						return false;
					}
					const form = {
						...this.form,
						uid: this.uid,
						exhibitId: this.loginForm.exhibitId
					}
					form.isCrossTalk = form.isCrossTalk == 1
					form.isExhibitNearby = form.isExhibitNearby == 1

					this.loading = true;
					this.isCanClick = false;
					add(form, this.apiType, this.apiModule).then(res => {
						this.routeBack('发车成功');
					}).finally(res=>{
						this.loading = false;
						this.isCanClick = true;
					})
				}
			},
			//选中回调
			select(item){
				this.$set(item,'address',this.cityPathFormat(item.cityPath))
				this.activeForm = this.$u.deepClone(item);
				this.addFlag = true;
				this.isCityEdit = true;
			},
			showPop(){
				this.activeForm = {
					count:'',
					address:"",
					id:''
				};
				this.addFlag = true;
			},
			close(){
				this.addFlag = false;
				this.isCityEdit = false;
			},
			getSelect(item) {
				const {extra} = item[0];
				// this.form = {...this.form,...extra};
				this.form.estimateTime = extra.estimateTime;
    		this.form.enrollTime = extra.enrollTime;
			},
			//删除
			removeIds(form) {
				const index = this.form.grantAuthCities.findIndex(val => val.cityId == form.cityId);
				if(index > -1){
					this.form.grantAuthCities.splice(index, 1);
					this.close()
				}
			},
			//保存设置的城市
			saveCity(form) {
				const {
					count,
					address,
					cityId,
					id
				} = form;
				if (!count) {
					this.$u.toast('数量不正确')
					return false;
				}
				if (!address) {
					this.$u.toast('请选择城市')
					return false;
				}
				//判断是否有重复城市
				// const findMore = this.form.grantAuthCities.some(val => val.cityId === cityId)
				const currIndex = this.form.grantAuthCities.findIndex(val => val.cityId === cityId)
				if (currIndex > -1) {
					this.form.grantAuthCities[currIndex] = form;
					this.form.grantAuthCities = [...this.form.grantAuthCities]
					this.close()
					return false;
				}
				// if (findMore) {
				// 	this.$u.toast('城市重复')
				// 	return false;
				// }
				// this.activeForm.id = this.$u.guid();
				this.form.grantAuthCities.push(this.activeForm)
				this.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.hasTips {
		line-height: 74rpx;
	}

	.label-setting {
		width: 200rpx;
		line-height: 70rpx;
	}

	.diy-view {
		padding: 0px 10px;
		border: 1px solid var(--line-color);
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		height: 70rpx;
		line-height: 70rpx;
		box-sizing: border-box;
		color: #4d4d4d;
		border-radius: 8rpx;
	}
</style>
